<?php 
	
	include("db_access.php");
	//Hacemos la consulta a nuestra tabla
	$active_users = get_active_users();
	$inactive_users = get_inactive_users();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script language="javascript">

	$(document).ready(function(){

		$("#active_users div").draggable({				// Process dragging event for an element identified by id
			connectToSortable: '#inactive_users',		// The draggable element will be dropped at a target, wich is another element identified by id
			cursor: 'move',								// Change the mouse icon while dragging
			cursorAt: { top: 15, left: 45 },			// Set the cursor at a position within the dragging element
			revert: 'invalid',							// Disable the "return to home" effect if you drop the element outside the target
			helper: function(event) {					// This helper will return the attribute you want when you are dragging the element
				return $('<div><img src="' + $(this).find("img").attr("src") + '" />');
			},
			stop: function(event, ui) { 				// This can let you do something when the dragging has stopped
			}
		});
		
		$("#active_users").droppable({							// Process dropping event for an element identified by id
			activeClass: 'drag_active',							// This class is applied when an element is being dragged to this element
			hoverClass: 'drag_hover',					 		// This class is applied when an element is being hold over this element
			drop: function(e, ui) {								// The drop event will trigger some actions defined below
				var id 	= ($(ui.draggable).attr("id"));			// This picks up the id of the HTML tag with wich holds some of the data we are using in the app
				$("#working_info").html("<p class = 'loading'><img src = 'img/loading.gif'/><br>Loading..</p>");		// This sets a nice loading icon for your pleasure :)
				$.get("set_user_active.php",{id:id}, function(data) {	// Here we get some mad PHP code to work, we pass id some paremeters via HTML GET
					$("#working_info").html(data);						// The results from the PHP code are inserted into the HTML tag we desire
					$(location).attr('href',"index.php"); 				// This redirects the page automatically after changes have been made :)
				});
			}	
		});
		
		$("#inactive_users div").draggable({			// Process dragging event for an element identified by id
			connectToSortable: '#active_users',			// The draggable element will be dropped at a target, wich is another element identified by id
			cursor: 'move',								// Change the mouse icon while dragging
			cursorAt: { top: 15, left: 45 },			// Set the cursor at a position within the dragging element
			revert: 'invalid',							// Disable the "return to home" effe	ct if you drop the element outside the target
			helper: function(event) {					// This helper will return the attribute you want when you are dragging the element
				return $('<div><img src = "' + $(this).find("img").attr("src") + '" />');
			},
			stop: function(event, ui) { 				// This can let you do something when the dragging has stopped
			}
		});
		
		$("#inactive_users").droppable({						// Process dropping event for an element identified by id
			activeClass: 'drag_active',							// This class is applied when an element is being dragged to this element
			hoverClass: 'drag_hover',							// This class is applied when an element is being hold over this element
			drop: function(e, ui) {								// The drop event will trigger some actions defined below
				var id 	= ($(ui.draggable).attr("id"));			// This picks up the id of the HTML tag with wich holds some of the data we are using in the app
				$("#working_info").html("<p class = 'loading'><img src = 'img/loading.gif'/><br>Loading..</p>");		// This sets a nice loading icon for your pleasure :)
				$.get("set_user_inactive.php",{id:id}, function(data) {	// Here we get some mad PHP code to work, we pass id some paremeters via HTML GET
					$("#working_info").html(data);						// The results from the PHP code are inserted into the HTML tag we desire
					$(location).attr('href',"index.php"); 				// This redirects the page automatically after changes have been made :)
				});
			}	
		});
	
	});

</script>

<style type="text/css">
/* CSS Document */
#principal{/* div principál */
	width:575px;
	margin:20px auto 0 auto;
	position:absolute;
	top: 2px;
	left: 270px;
}
#principal .usuarios{ /* div adonde tenemos el nombre de los usuarios y sus fotografia correspondientes*/
	width:100%;
	height:150px;
	border-radius: 5px 5px 5px 5px;
	border:1px solid gray;
	position: relative;
	padding:10px 0
}
#principal .usuario{/* div de cada nombre de usuario y fotografia que se apilan a la izquierda */
	width:86px;
	float:left;
	text-align:center;
	margin-left:8px;
	cursor:move
}
#principal .usuario img{/* efecto que se le da a la imagen previa del usuario-actualmente en googleschrom */
	box-shadow: 4px 4px 2px #888;
}
#principal .working_info{/* div adonde tenemos que arrastrar los usuarios para mostrar la informacion completa */
	border:3px solid #F1F2F1;
	background-color: #F8F8F8;
	margin:10px auto 0 auto;
	width:auto;
	height:180px
}
#principal .drag_active{/*efecto que nos indica adonde tenemos que arrastrar la foto del usuario   */
	border:5px solid #93D5F4;	
}
#principal .drag_hover{/* efecto al pocisionar la foto sobre el area de busqueda */
	border:2px solid #128EA5;	
	background: #E5E5E5;
}
#principal .working_info p.msg{/* div que contiene el mensaje (Arrastre el nombre del usuario para obtener mas informacion) */
	text-align:center;
	color: #333;
	font-size:18px;
	padding-top:40px
}

#principal .info_usuario{/* div que muestra la informacion completa del usuario despues de ser jalada de la base de datos */
	padding:10px;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#666
}
.loading{ /* div que contiene la imagen gif que muestra "cargando" */
text-align:center;
padding:50px 0; 
font:normal 11px Tahoma, Geneva, sans-serif; 
color:#999
}
#foto{/* div que muestra la foto mas grande despues de la busqueda en la base de datos */
	position:absolute;
	left: 400px;
	top: 180px;
	width: 137px;
	height: 131px;
}
</style>
</head>

<body>
<div id="principal">

	<h2>Usuarios activos</h2>
	<div id="active_users" class="usuarios">

        	<?php
			
				while($row = pg_fetch_array($active_users))
				{
					$id=$row['id_usuario'];
					echo "<a href='#'>";
					echo "	<div class='usuario' id=".$id." >";
					echo "		<p> ".$row['nombre']." ".$row['ap_pat']."</p>";
					echo "		<img src='img/active.png'>";
					echo "	</div>";
					echo "</a>";
				}
					
			?>
			 
  </div>
  
  <br>
    
	<h2>Usuarios inactivos</h2>
	<div id="inactive_users" class="usuarios">

        	<?php
			
				while($row = pg_fetch_array($inactive_users))
				{
					$id=$row['id_usuario'];
					echo "<a href='#'>";
					echo "	<div class='usuario' id=".$id." >";
					echo "		<p> ".$row['nombre']." ".$row['ap_pat']."</p>";
					echo "		<img src='img/inactive.png'>";
					echo "	</div>";
					echo "</a>";
				}
					
			?>
			 
	</div>
  
        <div id="working_info" class="working_info">
       	  <p class="msg"></p>
		</div>
		
    </div>
</body>
</body>
</html>